<template>
  <div class="model-selector">
    <div class="selector-group">
      <div class="model-select-wrapper">
        <label class="select-label">AI 模型</label>
        <el-select
          v-model="localValue"
          :placeholder="placeholder"
          size="default"
          class="model-select"
          @change="onChange"
          popper-class="model-select-dropdown"
        >
          <el-option
            v-for="item in models"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            class="model-option"
          >
            <div class="option-content">
              <span class="option-label">{{ item.label }}</span>
              <span v-if="item.description" class="option-description">{{ item.description }}</span>
            </div>
          </el-option>
        </el-select>
      </div>
      
      <div class="divider"></div>
      
      <div class="thinking-toggle-wrapper">
        <label class="toggle-label">思考模式</label>
        <div class="thinking-switch">
          <el-switch
            v-model="localDeepThinking"
            :active-text="localDeepThinking ? '深度思考' : '普通模式'"
            class="custom-switch"
            @change="onDeepThinkingChange"
            :active-color="'#409eff'"
            :inactive-color="'#dcdfe6'"
          />
          <div class="thinking-icon">
            <span v-if="localDeepThinking" class="deep-icon">🧠</span>
            <span v-else class="normal-icon">💭</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 状态指示器 -->
    <div class="status-indicator" :class="{ active: localDeepThinking }">
      <div class="indicator-dot"></div>
      <span class="indicator-text">
        {{ localDeepThinking ? '深度思考已启用' : '普通模式' }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'

const props = defineProps({
  modelValue: String,
  deepThinking: Boolean,
  models: {
    type: Array,
    default: () => []
  },
  placeholder: { type: String, default: '请选择 AI 模型' }
})

const emit = defineEmits(['update:modelValue', 'change', 'update:deepThinking', 'deep-thinking-change'])

// 从 localStorage 读取保存的值
const getSavedModel = () => {
  return localStorage.getItem('ai-selected-model') || props.modelValue || ''
}

const getSavedDeepThinking = () => {
  const saved = localStorage.getItem('ai-deep-thinking')
  return saved !== null ? JSON.parse(saved) : (props.deepThinking ?? false)
}

const localValue = ref(getSavedModel())
const localDeepThinking = ref(getSavedDeepThinking())

// 监听 props 变化
watch(() => props.modelValue, val => { 
  if (val && val !== localValue.value) {
    localValue.value = val 
  }
})

watch(() => props.deepThinking, val => { 
  if (val !== localDeepThinking.value) {
    localDeepThinking.value = val 
  }
})

// 保存到 localStorage 并发射事件
function onChange(val) {
  localStorage.setItem('ai-selected-model', val)
  emit('update:modelValue', val)
  emit('change', val)
}

function onDeepThinkingChange(val) {
  localStorage.setItem('ai-deep-thinking', JSON.stringify(val))
  emit('update:deepThinking', val)
  emit('deep-thinking-change', val)
}

// 组件加载时发射初始值（如果与 props 不同）
onMounted(() => {
  const savedModel = getSavedModel()
  const savedDeepThinking = getSavedDeepThinking()
  
  if (savedModel && savedModel !== props.modelValue) {
    emit('update:modelValue', savedModel)
    emit('change', savedModel)
  }
  
  if (savedDeepThinking !== props.deepThinking) {
    emit('update:deepThinking', savedDeepThinking)
    emit('deep-thinking-change', savedDeepThinking)
  }
})
</script>


<style scoped>
.model-selector {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.model-selector:hover {
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.selector-group {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.model-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}

.select-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.model-select {
  transition: all 0.3s ease;
}

.model-select:hover {
  transform: translateY(-1px);
}

:deep(.el-select .el-input__wrapper) {
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

:deep(.el-select .el-input__wrapper:hover) {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-select .el-input__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

:deep(.el-input__inner) {
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}

.divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, #e2e8f0, transparent);
  opacity: 0.6;
}

.thinking-toggle-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}

.thinking-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.thinking-switch:hover {
  background: rgba(248, 250, 252, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.custom-switch {
  transform: scale(0.9);
}

:deep(.el-switch .el-switch__core) {
  border-radius: 20px;
  border: 2px solid #dcdfe6;
  background: #ffffff;
  transition: all 0.3s ease;
}

:deep(.el-switch.is-checked .el-switch__core) {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

:deep(.el-switch__action) {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.thinking-icon {
  font-size: 20px;
  transition: all 0.3s ease;
  animation: iconFloat 2s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
}

.deep-icon {
  filter: drop-shadow(0 2px 4px rgba(64, 158, 255, 0.3));
}

.normal-icon {
  opacity: 0.7;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(229, 231, 235, 0.5);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.status-indicator.active {
  background: rgba(219, 234, 254, 0.8);
  border-color: #93c5fd;
}

.indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca3af;
  transition: all 0.3s ease;
}

.status-indicator.active .indicator-dot {
  background: #3b82f6;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.indicator-text {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  transition: color 0.3s ease;
}

.status-indicator.active .indicator-text {
  color: #1d4ed8;
}

.option-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.option-label {
  font-weight: 500;
  color: #374151;
}

.option-description {
  font-size: 12px;
  color: #9ca3af;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .model-selector {
    padding: 12px 16px;
  }
  
  .selector-group {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .model-select-wrapper {
    min-width: auto;
  }
  
  .divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
  }
  
  .thinking-toggle-wrapper {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* 下拉框样式 */
:global(.model-select-dropdown) {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95) !important;
}

:global(.model-select-dropdown .el-select-dropdown__item) {
  padding: 12px 16px;
  border-radius: 8px;
  margin: 4px 8px;
  transition: all 0.2s ease;
}

:global(.model-select-dropdown .el-select-dropdown__item:hover) {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  color: #0369a1;
  transform: translateX(4px);
}

:global(.model-select-dropdown .el-select-dropdown__item.selected) {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1d4ed8;
  font-weight: 600;
}
</style>
